<template>
    <div class="home">
        <div class="home-container">
            <div class="home-title">欢迎来到我的TODO列表</div>
            <div class="home-todoContainer">
                <div class="home-desc">
                    <ElTable :data="todoList" border style="width: 100%">
                        <ElTableColumn type="index" label="编号" align="center" />
                        <ElTableColumn prop="todoData" label="待办事项" align="center" />
                    </ElTable>
                </div>
                <div class="home-btn">
                    <ElButton type="primary" size="large" @click="$router.push('/login')">登录</ElButton>
                    <ElButton type="warning" size="large" @click="hdlGotoTodo">进入编辑TODO列表</ElButton>
                </div>
            </div>

        </div>

    </div>
</template>

<script setup lang="ts">
import router from '@/router';
import { useTodoStore } from '@/stores/todo';
const todoStore = useTodoStore();

const todoList = computed(() => todoStore.todos)

function hdlGotoTodo() {
    if (localStorage.getItem('userData')) {
        router.push('/todo');
    } else {
        ElMessage.info('您没有登录记录，请先登录');
        router.push('/login');
    }
}

</script>

<style scoped lang="scss">
.home {
    display: flex;
    width: 100%;
    height: 98vh;
    flex-direction: column;
    align-items: center;
    // justify-content: center;
    // background-color: red;

    .home-container {
        // background-color: grey;
        width: 70%;
        height: 100%;

        .home-title {
            display: flex;
            font-size: 36px;
            background-color: #bb3cee;
            align-items: center;
            justify-content: center;
            height: 155px;
            border-radius: 20px;
        }

        .home-todoContainer {
            display: flex;
            height: calc(98vh - 155px);
            flex-direction: column;

            .home-desc {
                display: flex;
                font-size: 24px;
                // border: 1px solid black;
                // background-color: skyblue;
                /* 让 home-desc 占据剩余空间 */
                flex: 1;
                justify-content: center;


            }

            .home-btn {
                // background-color: yellow;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 70px;

                .el-button {
                    width: 200px;
                    height: 50px;
                    font-size: 15px;
                }
            }
        }


    }


}
</style>
